<template>

  <div id="aa" style="height: 100%">

    <el-container style="height: 100%">

      <el-row class="  el-menu-vertical-demo el-menu" width="width: 300px;"style="height: 120vh;">
        <el-col :span="12">
          <div class="h5">{{msg}}</div>
          <el-menu
            width="100%"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b">




            <el-submenu index="1">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>信息管理</span>
              </template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>

            </el-submenu>



            <el-submenu index="2">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>Article管理</span>
              </template>
              <router-link to='/List' ><el-menu-item index="2-1">Article列表</el-menu-item></router-link>
              <router-link to='/Start' > <el-menu-item index="2-2">Article详情</el-menu-item></router-link>

            </el-submenu>



            <el-submenu index="3">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>人才管理</span>
              </template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>


            </el-submenu>



            <el-submenu index="4">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>推荐管理</span>
<!--                <li class="el-submenu__icon-arrow el-icon-arrow-down"></li>-->
              </template>
              <el-menu-item index="4-1">选项1</el-menu-item>
              <el-menu-item index="4-2">选项2</el-menu-item>

            </el-submenu>



            <el-submenu index="5">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>后台管理</span>
              </template>
              <el-menu-item index="5-1">选项1</el-menu-item>
              <el-menu-item index="5-2">选项2</el-menu-item>

            </el-submenu>



            <el-submenu index="6">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>用户管理</span>
              </template>
              <el-menu-item index="6-1">选项1</el-menu-item>
              <el-menu-item index="6-2">选项2</el-menu-item>

            </el-submenu>



            <el-submenu index="7">
              <template slot="title">
                <i class="fa fa-pencil fa-1x"></i>
                <span>内容管理</span>
              </template>
              <el-menu-item-group title="分组1">
                <el-menu-item index="7-1">选项1</el-menu-item>
                <el-menu-item index="7-2">选项2</el-menu-item>
              </el-menu-item-group>

            </el-submenu>




          </el-menu>

        </el-col>

      </el-row>


      <el-container>

        <el-header  class="el-header">
          <el-menu :default-active="activeIndex"  class="el-menu-demo"
                   background-color="white"	     mode="horizontal" @select="handleSelect" >
            <el-menu-item index="1">猎头</el-menu-item>
            <el-menu-item index="1">user</el-menu-item>
          <el-submenu class="hh" >
            <template  slot="title"><i  class="fa fa-power-off fa-2x" ></i></template>

            <el-menu-item index="2">修改密码</el-menu-item>
            <el-menu-item index="2" @click="logout">退出</el-menu-item>

          </el-submenu>
          </el-menu>




        </el-header>



        <router-view></router-view>           <!--  输出入口-->

      </el-container>

    </el-container>
  </div>
</template>



<script>       //js脚本部分


export default {
  name: 'two',
  data() {
    return {
      msg: '萝卜多后台管理'
    }
  },

  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },


    logout(){
      this.$confirm('确定退出？','系统提示',{
        confirmButtonText:'确定',
        cancelButtonText:'取消',
        type:'warning'
      }).then(()=>{
          this.$router.push('/login')
      })
    }


  },

}

import "../style/sass/main2.css"
</script>



